<template>
  <div>
    <!-- 选择学院 -->
    <el-select v-model="dep" placeholder="请选择学院">
      <el-option
        v-for="item in dep_list"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>

    <!-- 选择学院下阶段 -->
    <el-select
      v-model="stage"
      clearable
      :disabled="zt"
      placeholder="请选择阶段"
    >
      <el-option
        v-for="item in stage_list"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>

    <!-- 选择学生/家长 -->
    <el-select v-model="stu_par"  placeholder="查看与 学生/家长 通话">
      <el-option
        v-for="item in stu_par_list"
        :key="item.name"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <div
      class="echart"
      id="mychart"
      :style="{ float: 'left', width: '100%', height: '400px' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {xueyuanbi2} from "network/api/voice"
import {getAllDepartment} from "network/api/department"
import {getCollegeStageByCollegeId} from 'network/api/college_stage'
export default {
  props: {},
  data() {
    return {
      //  存放学院列表
      dep_list: [],
      //存放阶段列表
      stage_list:[],
      //阶段绑定值
      stage:'',
      stage_list:[],
      dep: "",
      //存放后端返回数据  每个学院的名称
      getlist: [],
      stu_par_list: [
        {
          name: "学生",
        },
        {
          name: "家长",
        },
      ],
      stu_par:'学生',
      data1: [{ value: 1048, name: "加载中..." }],
      state:0,
      zt:true
    };
  },
  computed: {},
  created() {
    // 获取所有学院
    getAllDepartment().then((msg) => {
        
      let xueyuanall = []
      msg.forEach(item=>{
        if (item.label==1){
          xueyuanall.push(item)
        }
      })
      this.dep_list = xueyuanall;
    //   this.dep_list = msg;
      this.dep_list.push({ id: 666, label: "振涛教育", name: "振涛教育" });
    });
    this.get_chart_data();
    this.fenpei();
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
      //监听选择学院
    dep: function () {
        if(this.dep!=''){
            this.state=1
            //把选择阶段的禁用解除
            this.zt = false;
        }
        //执行函数，获取图表数据
        if(this.dep == '振涛教育'){
            this.dep = ''
            this.stage = ''
            this.state = 0
            this.zt = true
        }
        this.get_chart_data();
        //通过学院文字去获取学院id
        getAllDepartment().then((msg) => {
            msg.forEach((item) => {
            if (this.dep == item.name) {
                //拿学院id去获取学院下所有阶段
                getCollegeStageByCollegeId(item.id).then((msg) => {
                    this.stage_list = msg.data;
                });
            }
            });
        });
    },
    stage:function(){
        if(this.stage!=''){
            this.state=2
        }
        this.get_chart_data()
    },
    //监听老师/学生 下拉框
    stu_par: function () {
      this.get_chart_data();
    },
  },
  methods: {
    // 通过学院名称去获取图表数据
    get_chart_data() {
        xueyuanbi2(this.dep,this.state,this.stage,this.stu_par).then((msg) => {
          console.log(msg);
        this.data1 = msg.data;
        this.initEcharts();
      });
    },
    fenpei() {
      // this.yidu = this.getlist[0]['count']
      // this.yiduming = this.getlist[0]['dep']
    },
    // 绘制图表
    initEcharts() {
      console.log("xian");

      const option = {
        // title: {
        //   text:
        //     "振涛教育" +
        //     this.dep +
        //     "  " +
        //     this.stage +
        //     "  " +
        //     "  " +
        //     "与" +
        //     this.stu_par +
        //     this.what_week +
        //     "通话进度一览",
        //   subtext: "未通话/已通话",
        //   left: "center",
        // },
         legend: {
            type: 'scroll',
            orient: 'vertical',
            left: 10,
            top: 20,
            bottom: 20,
            data:this.data1
  },
        series: [
          {
            name: this.stu_par+"通话结果一览",
            type: "pie",
            radius: ["0%", "80%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}}   ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 2,
              borderRadius: 14,
              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#4C5058",
                  fontSize: 13,
                  fontWeight: "bold",
                  lineHeight: 20,
                  align: "center",
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 14,
                },
              },
            },
            data: this.data1
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart")); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  components: {},
};
</script>

<style>
</style>